<template>
  <view class="page">
	<view class="coupon-list">
		<view class="item">
			<view class="item-left">
				<view class="item-num">
					￥<text>50</text>
				</view>
			</view>
			<view class="item-right">
				<view class="item-msg">
					<view class="item-title">购买课程无门槛优惠券</view>
					<view class="item-from">注册会员新用户获得</view>
					<view class="item-date">有效期至：2019-08-01</view>
				</view>
				<view class="item-btn">立即使用</view>
			</view>
		</view>
		<view class="item expire">
			<view class="item-left">
				<view class="item-num">
					￥<text>50</text>
				</view>
			</view>
			<view class="item-right">
				<view class="item-msg">
					<view class="item-title">购买泳票季卡优惠券</view>
					<view class="item-from">课程获赠</view>
					<view class="item-date">有效期至：2019-08-01</view>
				</view>
				<view class="item-btn">立即使用</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss">
.page{
	padding-bottom: 50rpx;
}
image{
	width: 100%;
	height: 100%;
}
.coupon-list{
	margin-top: 20rpx;
	padding: 0 30rpx;
	.item{
		display: flex;
		border-radius: 20rpx;
		align-items: center;
		height: 170rpx;
		margin-top: 20rpx;
		.item-left{
			width: 240rpx;
			height: 100%;
			background: url('~@/static/image/coupon1.png') no-repeat center;
			background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.item-num{
				font-size: 32rpx;
				color: #fff;
				text{
					font-weight: bold;
					font-size: 68rpx;
				}
			}
		}
		.item-right{
			background: #fff;
			height: 100%;
			flex: 1;
			display: flex;
			align-items: center;
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
		}
		.item-msg{
			padding: 10rpx;
			flex: 1;
			.item-title{
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
			.item-from{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
			.item-date{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
		.item-btn{
			width: 120rpx;
			height: 48rpx;
			margin-right: 10rpx;
			border-radius: 48rpx;
			text-align: center;
			line-height: 48rpx;
			background: #efb336;
			font-size: 24rpx;
			color: #fff;
		}
	}
	.item.expire{
		position: relative;
		overflow: hidden;
		&::after{
			content: '已过期';
			position: absolute;
			transform: rotate(45deg);
			font-weight: bold;
			right: -50rpx;
			top: 20rpx;
			width: 180rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #ddd;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}
		.item-left{
			background-image: url('~@/static/image/coupon2.png');
		}
		.item-title{
			color: #999;
		}
		.item-btn{
			display: none;
			background: #ddd;
		}
	}
}
</style>
